<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>缓存设置</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
			<div class="mb-10">
			  <Button-group>
			    <Button  type="primary" custom-icon="iconfont icon-fangkuai2" size="small" @click="showCreateModal" class="mr-10">添加</Button>
			    <Button type="primary" custom-icon="iconfont icon-shuaxin" size="small" @click="inQuire" class="fr">刷新缓存</Button>
			  </Button-group>
			</div>
            <div class="normal-list-page-bd">
                <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
            </div>
             <div>
                 <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"  show-total show-elevator @on-change="changePage"></Page>
             </div>
        </div>

        <!--新建&修改-->
        <Modal v-model="modal.system.isShow" :loading="modal.system.loading" :mask-closable="false" :title="modal.system.title" @on-ok="postData">
          <Form ref="systemFrom" :model="modal.system.formData" :rules="modal.system.rules" :label-width="120">
            <FormItem label="BANK_NUM" prop="bankNum">
              <Input placeholder="请输入" v-model="modal.system.formData.bankNum" style="width:300px;" ref="bankNum"/>
            </FormItem>
            <FormItem label="PROP_TYPE" prop="propType">
              <Input placeholder="请输入" v-model="modal.system.formData.propType" style="width:300px;"ref="propType"/>
            </FormItem>
            <FormItem label="PROP_CODE" prop="propCode">
              <Input placeholder="请输入" v-model="modal.system.formData.propCode" style="width:300px;"ref="propCode"/>
            </FormItem>
						<FormItem label="PROP_VALUE" prop="propValue">
						  <Input placeholder="请输入" v-model="modal.system.formData.propValue" style="width:300px;"/>
						</FormItem>
						<FormItem label="PROP_DESC" prop="propDesc">
						  <Input placeholder="请输入" v-model="modal.system.formData.propDesc" style="width:300px;"/>
						</FormItem>
          </Form>
        </Modal>
				<Modal v-model="modal.system.thatShow" :loading="modal.system.loading" :mask-closable="false" :title="modal.system.title" @on-ok="getData">
				  <Form ref="systemFrom" :model="modal.system.formData" :rules="modal.system.rules" :label-width="120">
				    <FormItem label="BANK_NUM" prop="bankNum">
				      <Input placeholder="请输入" v-model="modal.system.formData.bankNum" style="width:300px;" disabled="disabled"/>
				    </FormItem>
				    <FormItem label="PROP_TYPE" prop="propType">
				      <Input placeholder="请输入" v-model="modal.system.formData.propType" style="width:300px;"disabled="disabled"/>
				    </FormItem>
				    <FormItem label="PROP_CODE" prop="propCode">
				      <Input placeholder="请输入" v-model="modal.system.formData.propCode" style="width:300px;"disabled="disabled"/>
				    </FormItem>
						<FormItem label="PROP_VALUE" prop="propValue">
						  <Input placeholder="请输入" v-model="modal.system.formData.propValue" style="width:300px;"/>
						</FormItem>
						<FormItem label="PROP_DESC" prop="propDesc">
						  <Input placeholder="请输入" v-model="modal.system.formData.propDesc" style="width:300px;"/>
						</FormItem>
				  </Form>
				</Modal>
      </div>
    </div>
  </div>
</template>
<script>
import parameterApi from "@/api/base_sys/cacheSettings.js";
import moment from "moment";
import { Message } from "iview";

export default {
  name: "system",
  data() {
    return {
      // 弹出层数据
      modal: {
        system: {
          isShow: false,
					thatShow: false,
          loading: true,
          type: "create", // create 新建，update 修改
          title: "新建",
          rules: {
            name: [
              {
                required: true,
                message: "请填写系统名称",
                trigger: "blur"
              }
            ],
            url: [
              {
                required: true,
                message: "请填写URL",
                trigger: "blur"
              }
            ]
          },
          formData: {
            // id: undefined,
            // name: "",
            // url: "",
            // state: ""
          }
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [

          // 开始自动生成
          {
            title: "BANK_NUM",
            key: "bankNum",
            align: "center",
             minWidth: 130,
          },
          {
            title: "PROP_TYPE",
            key: "propType",
            align: "center",
             minWidth: 130,
          },
          {
            title: "PROP_CODE",
            key: "propCode",
            align: "center",
             minWidth: 130,
          },
		  {
		    title: "PROP_VALUE",
		    key: "propValue",
         minWidth: 130,
		  },
		  {
		    title: "PROP_DESC",
		    key: "propDesc",
        align: "center",
         minWidth: 130,
		  }
           // 自动生成结束
          ,
          {
            title: "操作",
            align: "center",
            minWidth: 130,
            align: "center",
            render: (h, params) => {
              return h("div", { class: "action-group" }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.showUpdateModal(params.row);
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData(params.row);
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ]);
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ""
      }
    };
  },
  methods: {
    // 获取列表
    getTableData() {
      const that = this;
      that.queryData.totalRecord = undefined;
      parameterApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list;
          that.queryData.totalRecord = res.data.totalRecord;
          that.queryData.pageNum = res.data.pageNum;
          that.queryData.limit = res.data.pageSize;
        })
        .catch(error => {
          Message.error(error);
        });
    },

    // 点击保存——新建&修改
    postData() {
      const that = this;
      that.$refs["systemFrom"].validate(valid => {
        if (valid) {
// 新建
            parameterApi.add(that.modal.system.formData)
              .then(res => {
                that.modal.system.isShow = false;
                that.modal.system.loading = false;
                if (!res.code) {
                  that.getTableData();
                  that.$Notice.success({
                    title: "保存成功!"
                  });
                } else {
                  that.$Notice.error({
                    title: res.message
                  });
                }
              })
              .catch(error => {
                Message.error(error);
              });


				} else {
          that.modal.system.loading = false;
          that.$nextTick(() => {
            that.modal.system.loading = true;
          });
        }
      });
    },
		getData() {
		  const that = this;
		  that.$refs["systemFrom"].validate(valid => {
		    if (valid) {
		        parameterApi.update(
		          that.modal.system.formData
		        )
		          .then(res => {
		            that.modal.system.thatShow = false;
		            that.modal.system.loading = false;
		            if (!res.code) {
		              that.getTableData();
		              that.$Notice.success({
		                title: "保存成功!"
		              });
		            } else {
		              that.$Notice.error({
		                title: res.message
		              });
		            }
		          })
		          .catch(error => {
		            Message.error(error);
		          });
				} else {
		      that.modal.system.loading = false;
		      that.$nextTick(() => {
		        that.modal.system.loading = true;
		      });
		    }
		  });
		},
    // 删除
    delData(ids) {
      // if (!ids.length) {
      //   return;
      // }
      this.$Modal.confirm({
        title: "确认删除",
        content:
          "<p>您确认删除该条数据吗？</p><p>删除后将无法撤销，请谨慎操作！</p>",
        loading: true,
        onOk: () => {
          parameterApi.del(ids
          ).then(res => {
            this.$Modal.remove();
            if (!res.code) {
              this.$Notice.success({
                title: "删除成功"
              });
              this.queryData.page = 1;
              this.getTableData();
            } else {
              this.$Notice.error({
                title: res.message
              });
            }
          });
        }
      });
    },

    // 排量删除
    batchDel() {
      let ids = [];
      this.list.selections.forEach(element => {
        ids.push(element.id);
      });
      if (!ids.length) {
        this.$Message.error({
          content: "请先选择要删除的项！",
          duration: 3
        });
      }
      this.delData(ids);
    },

    // 全选，不全选
    selectionChange(args) {
      this.list.selections = args;
    },
		
		inQuire() {
			this.queryData.page=1;
		  this.getTableData();
		},

    //每页显示记录数变更
    onPageSizeChange(pageSize) {
      this.queryData.limit = pageSize;
      this.getTableData();
    },

    // 换页
    changePage(page) {
      this.queryData.page = page;
      this.getTableData();
    },

    // 显示新建弹窗
    showCreateModal() {
      this.modal.system.type = "create";
      this.modal.system.title = "新建";
      this.modal.system.formData = {};
      this.modal.system.isShow = true;
    },

    // 显示修改弹窗
    showUpdateModal(data) {
			// this.$Message.error('对方不想和你说话，并且告诉你功能正在开发')
      this.modal.system.type = "update";
      this.modal.system.title = "修改";
      // 不请求后端，直接list取对象
      // this.modal.system.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      this.modal.system.thatShow = true;
      const that = this;
      parameterApi.getDetail(data).then(res => {
          that.modal.system.formData = res.data;
          that.modal.system.thatShow = true;
        })
        .catch(error => {
          Message.error(error);
        });

    }
  },

  created() {
    this.getTableData();
  }
};
</script>
